<template>
	<view class="setting-item box-prompt">
		<view v-if="wordsCate.length > 0" class="words-cate">
			<view v-for="(item,index) in wordsCate" class="item" @click="showWordsPicker(index, item.id)">
				<text>{{ item.title }}</text>
				<text v-if="pickedCount(item.id) > 0" class="count">{{ pickedCount(item.id) }}</text>
			</view>
			<view style="clear: both;"></view>
		</view>
		<view class="words-input">
			<textarea type="text" v-model="wordInput" :auto-height="true" :placeholder="'输入自定义画面描述' | lang"
				maxlength="1000" cursor-spacing="0"></textarea>
			<button class="btn btn-primary-plain btn-add" type="primary" plain size="small" @click="addToPicked">↓ 添加到描述</button>
		</view>
		<view v-if="wordsPicked && wordsPicked.length > 0" class="words-list">
			<view v-for="(item, index) in wordsPicked" :key="index" class="item" :data-index="index" @tap="onWordsClick">
				<text v-if="type === 'mj'" class="weight" :title="'比重: ' + item.weight">{{ item.weight }}</text>
				{{ item.text.length > 15 ? item.text.substr(0, 15) + '...' : item.text }}
			</view>
			<view style="clear: both;" />
		</view>

		<popup ref="wordWeightPopup" title="调整比重" height="500rpx">
			<view class="popup-weight">
				<text class="alert-info">说明：比重取值范围1-20，默认1</text>
				<view style="padding: 30px 10px 20px 15px;">
					<slider :value="activeWord.weight" :min="1" :max="20" :show-value="true" activeColor="#04BABE" block-size="26" @change="onWeightChange" />
				</view>
				
				<view class="footer">
					<button class="btn btn-default" @tap="closeWordWeight">取 消</button>
					<button class="btn btn-primary" @tap="setWordWeight">确 定</button>
				</view>
			</view>
		</popup>
		<actionSheet
			ref="actionSheet"
			:actions="actions"
			:data="activeWordIndex"
			@select="actionSelect">
		</actionSheet>
		<popup ref="wordsPickerPopup" title="选取关键词">
			<wordsPicker :pcate-index="wordsPickerActivePcateIndex" :cates="wordsCate" :picked="wordsPicked" @close="closeWordsPicker" @picker="setWords" @getWordsList="getWordsList" @setWords="setWords" />
		</popup>
	</view>
</template>

<script>
	const app = getApp()
	import wordsPicker from './wordsPicker'
	export default {
		components: {
			wordsPicker
		},
		props: {
			type: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				lists: [],
				wordInput: '',
				page: 1,
				pagesize: 10,
				drawSetting: {},
				wordsCate: [],
				activeWordIndex: null,
				activeWord: {},
				wordsPickerActivePcateIndex: -1,
				wordsPickerActivePcateId: 0,
				wordsPicked: [],
				wordWeightShow: false,
				actions: []
			}
		},
		created() {
			this.getWordsCate()
		},
		methods: {
			getWordsCate() {
				app.globalData.util.request({
					url: '/draw/getWordsCate',
					loading: false
				}).then(res => {
					this.wordsCate = res.data
				})
			},
			getWordsList(pcateIndex, pcateId) {
				app.globalData.util.request({
					url: '/draw/getWordsList',
					data: {
						pcate: pcateId
					}
				}).then(res => {
					const wordsCate = JSON.parse(JSON.stringify(this.wordsCate))
					wordsCate[pcateIndex].wordsList = res.data.list
					wordsCate[pcateIndex].wordsCount = res.data.count
					this.wordsCate = wordsCate
				})
			},
			addToPicked() {
				const word = this.trim(this.wordInput)
				if (word) {
					this.wordsPicked.push({
						text: word,
						weight: 1
					})
					this.wordInput = ''
				}
			},
			removePicked(index) {
				this.wordsPicked.splice(index, 1)
			},
			clearPicked() {
				this.wordsPicked = []
			},
			showWordsPicker(pcateIndex, pcateId) {
				this.wordsPickerActivePcateIndex = pcateIndex
				this.wordsPickerActivePcateId = pcateId
				this.$refs.wordsPickerPopup.open()
			},
			closeWordsPicker() {
				this.wordsPickerActivePcateIndex = -1
				this.wordsPickerActivePcateId = 0
				this.$refs.wordsPickerPopup.close()
			},
			setWords(words) {
				this.wordsPicked = words
				this.closeWordsPicker()
			},
			getWordsPicked() {
				return this.wordsPicked
			},
			showWordWeight(index) {
				this.activeWordIndex = index
				this.activeWord = JSON.parse(JSON.stringify(this.wordsPicked[index]))
				this.$refs.wordWeightPopup.open()
			},
			closeWordWeight() {
				this.activeWordIndex = null
				this.activeWord = {}
				this.$refs.wordWeightPopup.close()
			},
			onWeightChange(e) {
				this.activeWord.weight = e.detail.value
			},
			setWordWeight() {
				this.wordsPicked[this.activeWordIndex] = this.activeWord
				this.closeWordWeight()
			},
			onWordsClick(e) {
				let index = e.currentTarget.dataset.index
				this.activeWordIndex = index
				this.activeWord = JSON.parse(JSON.stringify(this.wordsPicked[index]))
				if (this.type == 'mj') {
					this.actions = [{title: '调整权重', action: 'weight'}, {title: '移除', action: 'remove'}];
				} else {
					this.actions = [{title: '移除', action: 'remove'}];
				}
				
				this.$refs.actionSheet.open()
			},
			actionSelect(e) {
				let action = e.action
				let index = e.data
				if (action == 'weight') {
					this.showWordWeight(index)
				} else if (e.action == 'remove') {
					this.removePicked(index)
				}
			},
			pickedCount(id) {
				let count = 0
				if (this.wordsPicked) {
					this.wordsPicked.forEach(item => {
						if (item.pcate === id) {
							count++
						}
					})
				}
				return count
			},
			trim(str) {
				if (str) {
					str = str.replace(/(^\s*)|(\s*$)/g, '')
				}
				return str
			},
			showLogin() {
				this.$emit('showLogin')
			},
			showPay() {
				if (this.user_id) {
					this.$emit('showPay', 'draw')
				} else {
					this.$emit('showLogin')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box-prompt {
		width: 100%;
		box-sizing: border-box;
		transition: background 0.1s ease-in-out;
		z-index: 9;

		.words-cate {
			padding: 0 0 24rpx 0;

			.item {
				margin: 0 16rpx 16rpx 0;
				padding: 0 30rpx;
				line-height: 64rpx;
				height: 64rpx;
				background-color: #e2e6e4;
				color: #656565;
				font-size: 28rpx;
				font-weight: normal;
				border-radius: 10rpx;
				cursor: pointer;
				float: left;
				display: flex;
				justify-content: center;
				align-items: center;

				&:hover {
					background: #d4dad6;
				}

				.count {
					display: inline-block;
					width: 36rpx;
					height: 36rpx;
					line-height: 36rpx;
					text-align: center;
					background-color: #04BABE;
					color: #fff;
					margin-left: 8rpx;
					border-radius: 50%;
					font-size: 24rpx;
				}
			}
		}

		.words-input {
			position: relative;

			textarea {
				width: 100%;
				min-height: 88rpx;
				background: #fff;
				padding: 20rpx;
				box-sizing: border-box;
				border: 1px solid #eee;
				border-radius: 10rpx;
			}

			.btn-add {
				position: absolute;
				right: 16rpx;
				bottom: 16rpx;
				height: 64rpx;
				line-height: 64rpx;
				font-size: 26rpx;
			}
		}

		.words-list {
			margin: 40rpx 0 0 0;
			max-height: 604rpx;
			overflow: auto;

			.item {
				padding: 12rpx 24rpx;
				margin-right: 16rpx;
				margin-bottom: 16rpx;
				position: relative;
				float: left;
				border-radius: 10rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				background: #d1f2f3;
				border: 1px solid #04BABE;
				color: #04BABE;
				font-size: 28rpx;
				&:active {
					opacity: 0.6;
				}

				.weight {
					display: block;
					background: #04BABE;
					border-radius: 8rpx;
					color: #fff;
					width: 36rpx;
					height: 36rpx;
					line-height: 36rpx;
					font-size: 24rpx;
					text-align: center;
					cursor: pointer;
					margin-right: 12rpx;

					&:hover {
						opacity: 0.6;
					}
				}
			}
		}
	}
	.popup-weight {
		padding: 30rpx 30rpx;
		.alert-info {
			padding-left: 60rpx;
			font-size: 28rpx;
			color: #666;
		}
		.footer {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 30rpx;
			.btn {
				width: 200rpx;
				margin: 0 20rpx;
			}
		}
	}
</style>